<template>
  <m-win wd="950" v-model:window_open="val.md_dxtop" title="刀型排名">
    <template #content>
      <div style="min-height: 100vh" class="_mbbox boxgap">
        <div class="nbox1 select2_gap">
          <n-button
            size="small"
            v-if="val.dxtop_obj.fever == null"
            @click="
              val.dxtop_obj.fever = 'nofever';
              val.dxtop_obj.page = 1;
              set.dxtop_reload();
            "
            ><n-icon size="18" :component="ArrowSwap20Filled" />全数据排名</n-button
          >
          <n-button
            size="small"
            type="gt_n"
            v-else-if="val.dxtop_obj.fever == 'nofever'"
            @click="
              val.dxtop_obj.fever = 'fever';
              val.dxtop_obj.page = 1;
              set.dxtop_reload();
            "
            ><n-icon size="18" :component="ArrowSwap20Filled" />无炽热排名</n-button
          >
          <n-button
            size="small"
            type="gt_w"
            v-else-if="val.dxtop_obj.fever == 'fever'"
            @click="
              val.dxtop_obj.fever = null;
              val.dxtop_obj.page = 1;
              set.dxtop_reload();
            "
            ><n-icon size="18" :component="ArrowSwap20Filled" />纯炽热排名</n-button
          >
          <n-input size="small" placeholder="玩家名称筛选" @input="set.dxtopname_sea" />
        </div>
        <div class="nbox1">
          <div class="page">
            <div @click="set.dxtop_page(1)">首页</div>
            <van-pagination
              v-if="val.maxpage > 1"
              @change="set.dxtop_page"
              v-model="val.dxtop_page"
              :page-count="val.dxtop_maxpage"
              :show-prev-button="false"
              :show-next-button="false"
            />
            <div>总页数 {{ val.dxtop_maxpage }}</div>
          </div>

          <van-loading vertical v-if="val.loading2 == true" style="margin-top: 16px">
            <template #icon>
              <van-icon name="star-o" size="30" />
            </template>
            Loading...
          </van-loading>
          <div class="__dxgap">
            <template v-for="(item, key) in val.dxtop_data">
              <div class="__dxbox">
                <div
                  style="font-size: 0.9em; display: flex; align-items: center; gap: 8px"
                >
                  [{{ item.ranking }}] {{ item.user_name }}
                  <template v-if="item.fever == 1">
                    <img style="width: 18px" class="fever_img" :src="img_fever" />
                  </template>
                </div>
                <n-grid class="ngrid" :cols="2" y-gap="8">
                  <n-gi>
                    <n-statistic label="日期">
                      <div class="__font">{{ item.mao_time }}</div>
                    </n-statistic>
                  </n-gi>
                  <n-gi>
                    <n-statistic label="伤害">
                      {{ item.dmg?.toLocaleString() }}
                    </n-statistic>
                  </n-gi>
                </n-grid>
                <div>
                  <n-button
                    size="small"
                    strong
                    secondary
                    @click="
                      cfg.ckdao({ user_id: item.user_id, season: sval.season_click })
                    "
                    >查刀</n-button
                  >
                </div>
              </div>
            </template>
          </div>
          <div class="page">
            <div @click="set.dxtop_page(1)">首页</div>
            <van-pagination
              v-if="val.maxpage > 1"
              @change="set.dxtop_page"
              v-model="val.dxtop_page"
              :page-count="val.dxtop_maxpage"
              :show-prev-button="false"
              :show-next-button="false"
            />
            <div>总页数 {{ val.dxtop_maxpage }}</div>
          </div>
        </div>
      </div>
    </template>
  </m-win>

  <van-dialog
    v-model:show="val.md_jump"
    closeOnClickOverlay
    teleport="body"
    @confirm="set.jump"
  >
    <div class="vandialogbg">
      <van-cell-group inset>
        <van-field center v-model="val.jumptext" type="digit" label="页数" />
      </van-cell-group>
    </div>
  </van-dialog>
  <div class="_mbbox2 drk_div">
    <div class="nbox1 select_gap">
      <div class="__sldfbig">
        <n-select
          :options="sval.season_list"
          :value="sval.season_click"
          placeholder="筛选赛季"
          @update:value="set.sl_click"
        />
      </div>
      <div class="__sldf">
        <n-select
          :options="val.boss_list"
          placeholder="筛选首领"
          v-model:value="val.ckboss"
          @change="set.get_data('repage')"
        />
      </div>
      <div class="__sldf">
        <template v-if="val.swrole == true">
          <n-select
            v-model:value="val.ckzk"
            filterable
            placeholder="筛选主控"
            :options="val.role_all"
            @change="set.get_data('repage')"
          />
        </template>
        <template v-else>
          <n-select
            v-model:value="val.ckzk"
            filterable
            :render-label="set.select"
            placeholder="筛选主控"
            :options="val.role"
            @change="set.get_data"
          />
        </template>
      </div>
      <div class="__sldf">
        <template v-if="val.shlx == 'fever'">
          <n-button size="small" @click="val.shlx = null" type="gt_n">
            <n-icon size="18" :component="ArrowSwap20Filled" />炽热</n-button
          >
        </template>
        <template v-else>
          <n-button strong secondary size="small" @click="val.shlx = 'fever'">
            <n-icon size="18" :component="ArrowSwap20Filled" />炽热</n-button
          >
        </template>
        <template v-if="val.swrole == true">
          <n-button type="gt_n" size="small" @click="val.swrole = false">
            <n-icon size="18" :component="ArrowSwap20Filled" />全角色</n-button
          >
        </template>
        <template v-else>
          <n-button strong secondary size="small" @click="val.swrole = true">
            <n-icon size="18" :component="ArrowSwap20Filled" />全角色</n-button
          >
        </template>

        <n-button
          strong
          secondary
          size="small"
          @click="
            val.ckzk = null;
            val.ckboss = null;
            val.page = 1;
            set.get_data();
          "
          >清除筛选</n-button
        >
      </div>
    </div>
    <div class="nbox1">
      <div class="page">
        <div @click="set.page(1)">首页</div>
        <van-pagination
          v-if="val.maxpage > 1"
          @change="set.page"
          v-model="val.page"
          :page-count="val.maxpage"
          :show-prev-button="false"
          :show-next-button="false"
        />
        <div
          @click="
            val.jumptext = '';
            val.md_jump = true;
          "
        >
          跳转
        </div>
      </div>
      <van-loading vertical v-if="val.loading == true" style="margin-top: 16px">
        <template #icon>
          <van-icon name="star-o" size="30" />
        </template>
        Loading...
      </van-loading>
      <div class="ranking_gap">
        <div class="ranking_box" v-for="(item, key) in val.data">
          <div class="ranking_hover">
            <n-button
              size="tiny"
              type="gt_y"
              @click="
                set.dxtop({
                  season: sval.season_click,
                  boss_name: item.boss_name,
                  icon: item.icon,
                })
              "
              >刀型排名</n-button
            >
          </div>
          <div style="width: 100%">
            <div class="title_font">{{ item.boss_name }}</div>
          </div>
          <div class="_rolelist">
            <template v-for="item2 in item.icon?.split(',')">
              <div class="roleava avacss1">
                <img class="_img1" :src="cfg.function.ava(item2)" />
              </div>
            </template>
          </div>
          <n-grid class="ngrid" :cols="3" y-gap="8">
            <n-gi>
              <n-statistic label="刀数">
                <div class="__font">{{ item.count }}</div>
              </n-statistic>
            </n-gi>
            <n-gi>
              <n-statistic label="均伤">
                <div class="__font" v-if="val.shlx == null">
                  {{ parseInt(item.nofever_avgdmg / 10000) ?? 0 }}
                </div>
                <div class="__font" v-else>
                  {{ parseInt(item.nofever_maxdmg / 10000) ?? 0 }}
                </div>
              </n-statistic>
            </n-gi>
            <n-gi>
              <n-statistic label="最高">
                <div class="__font" v-if="val.shlx == null">
                  {{ parseInt(item.nofever_maxdmg / 10000) ?? 0 }}
                </div>
                <div class="__font" v-else>
                  {{ parseInt(item.fever_maxdmg / 10000) ?? 0 }}
                </div>
              </n-statistic>
            </n-gi>
          </n-grid>
          <div class="__gj">
            <div>
              （冠军）<span v-if="val.shlx == null">{{ item.nofever_player_name }}</span
              ><span v-else>{{ item.fever_player_name }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="page">
        <div @click="set.page(1)">首页</div>
        <van-pagination
          v-if="val.maxpage > 1"
          @change="set.page"
          v-model="val.page"
          :page-count="val.maxpage"
          :show-prev-button="false"
          :show-next-button="false"
        />
        <div
          @click="
            val.jumptext = '';
            val.md_jump = true;
          "
        >
          跳转
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.__sldf {
  display: flex;
  gap: 3px;
  align-items: center;
}
.__dxbox {
  cursor: pointer;
  display: flex;
  padding: 0.5em;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  border-radius: 0.25em;
  position: relative;
  background: var(--nbox2-bg);
  align-items: center;
  gap: 0.5em;
  height: 100%;
  flex-direction: column;
}
.__dxgap {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75em;
}
._rolelist {
  display: flex;
  gap: 1em;
  align-items: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.select2_gap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  justify-content: center;
  gap: 8px 8px;
}
.__gj {
  text-align: center;
  margin-top: 0.35em;
  padding-top: 0.35em;
  font-size: 0.85em;
  border-top: 1px solid #616060;
  width: 100%;
}

.roleava {
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
}

.roleava ._img1 {
  width: 100%;
  height: 100%;
}
@media (max-width: 650px) {
  .n-select {
    grid-column: span 1 !important;
  }
  .__sldf {
    grid-column: span 1 !important;
  }
}
@media (max-width: 428px) {
  ._rolelist {
    gap: 1.8vw;
  }
  .roleava {
    width: 8.5vw;
    outline: solid 0.5vw #8d8072;
    height: 8.5vw;
  }
  .ranking_box .ngrid div {
    grid-column: span 1 !important;
  }
}
</style>
<script>
import { ArrowSwap20Filled } from "@vicons/fluent";
import img_fever from "@/assets/img/battle/fever-on.svg";
import { cfg } from "@/cfg/cfg.js";
import { set } from "lodash";
import { getrole, getbossv2 } from "@/cfg/function.js";
import { nextTick } from "vue";

export default {
  props: {
    tjval: {
      type: Object,
      required: false,
    },
  },
  setup(props) {
    const sval = props.tjval;
    const set = {
      dxtopname_sea: (name) => {
        val.dxtop_obj.user_name = name;
        set.dxtop_page(1);
      },
      dxtop_page: (page) => {
        val.dxtop_obj.page = page;
        val.dxtop_page = page;
        set.dxtop_reload();
      },
      dxtop_reload: async () => {
        val.loading2 = true;
        val.dxtop_data = [];
        setTimeout(async () => {
          const back = await cfg.mget({
            url: `${cfg.url2}api/tj`,
            query: {
              type: "get_dxtop",
              ...val.dxtop_obj,
            },
          });
          if (back.code == 0) {
            val.dxtop_data = back.data.data;
            val.dxtop_maxpage = back.data.dcount;
            val.loading2 = false;
          }
        }, 100);
      },
      dxtop: async (obj) => {
        val.md_dxtop = true;
        val.loading2 = true;
        val.dxtop_obj = obj;
        val.dxtop_data = [];
        const back = await cfg.mget({
          url: `${cfg.url2}api/tj`,
          query: {
            type: "get_dxtop",
            page: 1,
            ...obj,
          },
        });
        if (back.code == 0) {
          val.dxtop_data = back.data.data;
          val.dxtop_maxpage = back.data.dcount;
          val.loading2 = false;
        }
      },
      select: (option) => {
        return h("div", { class: "select_div" }, [
          h("img", {
            class: "select_ava",
            src: cfg.function.ava(option.icon),
          }),
          option.name,
        ]);
      },
      tabhand: async (back, hand, page) => {
        val.loading = true;
        val.dateck = back;
        val.data = [];
        if (page == null) {
          val.page = 1;
        }
        cfg.router.replace({
          path: `/gt/tj-grk/${back}`,
          query: {
            p: val.page,
          },
        });
        await set.get_data();
      },
      jump: () => {
        val.md_jump = false;
        const page = parseInt(val.jumptext);
        if (page < 1 || page > val.maxpage || isNaN(page)) {
          cfg.alert3({
            message: "页数超出范围或输入错误",
          });
          return;
        }
        set.page(page);
      },
      guild_sea: (name) => {
        val.sea_gname = name;
        val.page = 1;
        set.get_data();
      },
      page: (page) => {
        cfg.router.replace({
          query: {
            p: page,
          },
        });
        val.page = page;
        set.get_data();
      },
      sl_click: async (sid) => {
        if (sid <= 2012) {
          cfg.alert3({
            message: `只允许查看2025-10-03之后的赛季数据`,
          });
          return;
        }
        sval.season_click = sid;
        val.page = 1;
        await set.get_season_boss();
        await set.get_data();
      },
      get_season_boss: async () => {
        try {
          const back = await cfg.mget({
            url: `${cfg.url2}api/season`,
            query: {
              type: "get_boss_info",
              season: sval.season_click,
            },
          });

          if (back.code == 0) {
            val.boss_list = [
              {
                value: null,
                label: "清空",
              },
            ];
            const data = back.data.info;
            for (let index = 0; index < data.length; index++) {
              const item = data[index];
              val.boss_list.push({
                value: item.boss_name,
                label: `〔${item.et}〕${item.boss_name}`,
              });
            }
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          cfg.alert3({
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },
      get_data: async (type) => {
        if (type == "repage") {
          val.page = 1;
        }
        nextTick(async () => {
          try {
            const back = await cfg.mget({
              url: `${cfg.url2}api/tj`,
              query: {
                type: "get_dxranking",
                zk: val.ckzk,
                boss: val.ckboss,
                page: val.page,
                season: sval.season_click,
              },
            });
            if (back.code == 0) {
              val.loading = false;
              const b = back.data;
              val.maxpage = b.maxpage;
              val.data = b.data;
            } else {
              throw { code: -1, message: back.msg };
            }
          } catch (e) {
            val.loading = false;
            cfg.alert3({
              message: e.message,
            });
          }
        });
      },
    };
    const val = reactive({
      page: 1,
      data: [],
      boss: [],
      role_all: [],
      boss_list: [],
      role: [],
    });

    onMounted(async () => {
      val.loading = true;
      await getrole();
      await set.get_season_boss();
      val.role = [
        {
          value: null,
          label: "清空",
          name: "清空",
        },
      ];
      for (let index = 0; index < cfg.role.length; index++) {
        const d = cfg.role[index];
        val.role_all.push({
          value: d.icon,
          label: d.name + " - " + d.bname,
        });
        if (!d.bantag?.includes("ghz")) {
          val.role.push({
            value: d.icon,
            label: d.name + " - " + d.bname,
            name: d.name,
            icon: d.icon,
          });
        }
      }
      if (cfg.route.query.p != null) {
        val.page = parseInt(cfg.route.query.p);
      }
      set.get_data();
    });
    return { sval, cfg, set, val, img_fever, ArrowSwap20Filled };
  },
};
</script>
